<template>
  <t-card>
    <t-form :data="serchFormData" layout="inline">
      <t-form-item label="渠道名称" name="companyName">
        <t-input v-model="serchFormData.companyName" placeholder="请输入渠道名称" type="search" />
      </t-form-item>
      <t-form-item label="导游" name="guideName">
        <t-input v-model="serchFormData.guideName" placeholder="请输入导游姓名" type="search" />
      </t-form-item>
      <t-form-item label="批次ID" name="batchOrderId">
        <t-input v-model="serchFormData.batchOrderId" placeholder="请输入批次ID" type="search" />
      </t-form-item>

      <t-button :loading="dataLoading" @click="handleSearchClick">
        查询
      </t-button>
    </t-form>
    <t-divider />
    <!-- @vue-expect-error -->
    <t-table :data="data" :columns="columns" row-key="id" :pagination="pagination" cell-empty-content="-" :loading="dataLoading" @page-change="handlePageChange" />
  </t-card>
</template>
<script setup lang="ts">
import { useRouteQuery } from '@vueuse/router'
import type { PageInfo, PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import { getBatchTicketCheckPageList } from '@/api/batch'
import type { BatchTicketCheckRes } from '@/api/model/batch'
import { formatDateTime } from '@/utils/date'

const batchOrderIdInitial = useRouteQuery('batchOrderId', '')
const serchFormData = reactive({
  companyName: '',
  guideName: '',
  batchOrderId: batchOrderIdInitial.value,
})

type UseData = BatchTicketCheckRes
const data = ref<BatchTicketCheckRes[]>([])
const columns: TableProps<UseData>['columns'] = [
  {
    colKey: 'id',
    title: 'ID',
  },
  {
    colKey: 'batchOrderId',
    title: '批次ID',
  },
  {
    colKey: 'companyName',
    title: '渠道名称',
  },
  {
    colKey: 'guideName',
    title: '导游',
  },
  {
    colKey: 'ticketName',
    title: '票类',
  },
  {
    colKey: 'createDate',
    title: '创建时间',
    cell: (_, { row }) => formatDateTime(row.createDate),
  },
  {
    colKey: 'updateDate',
    title: '更新时间',
    cell: (_, { row }) => formatDateTime(row.updateDate),
  },
  {
    colKey: 'op',
    title: '操作',
  },
]
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 15,
  total: 0,
})
const dataLoading = ref(false)
function fetchData() {
  dataLoading.value = true
  getBatchTicketCheckPageList({ page: pagination.value.current!, size: pagination.value.pageSize!, ...serchFormData }).then((res) => {
    data.value = res.data
    pagination.value.total = res.total
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()

function handlePageChange(pageInfo: PageInfo) {
  pagination.value.current = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  fetchData()
}
function handleSearchClick() {
  pagination.value = {
    current: 1,
    pageSize: 15,
    total: 0,
  }
  fetchData()
}
</script>
<style scoped>

</style>
